﻿@using Abp.Web.Mvc.Extensions
@using MyCompanyName.AbpZeroTemplate.Web.Navigation
@{
    ViewBag.CurrentPageName = PageNames.App.Tenant.Dashboard;
}
@section Scripts
{
    @Html.IncludeScript("~/Areas/Mpa/Views/Dashboard/Index.js")
}
<div class="row margin-bottom-5">
    <div class="col-xs-6">
        <div class="page-head">
            <div class="page-title">
                <h1>
                    <span>@L("Dashboard")</span> <small>@L("DashboardHeaderInfo")</small>
                </h1>
            </div>
        </div>
    </div>
    <div class="col-xs-6 text-right">

    </div>
</div>

<div class="note note-info note-bordered">
    <h3>@L("DashboardDemo_Note_Title")<span class="close" data-close="note"></span></h3>
    <p>
        @L("DashboardDemo_Note_Info")
    </p>
    <br/>
    <h4>@L("LookingForSpaVersion")</h4>
    <p>
        <a href="@Url.Action("Index", "Application", new {area = string.Empty})">
            @Html.Raw(L("DashboardNoteForSpaVersion")) @L("SeeDemo")
        </a>
    </p>
</div>

<div class="row margin-top-10">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-green-sharp">
                        7800<small class="font-green-sharp">$</small>
                    </h3>
                    <small>TOTAL PROFIT</small>
                </div>
                <div class="icon">
                    <i class="icon-pie-chart"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 76%;" class="progress-bar progress-bar-success green-sharp">
                        <span class="sr-only">76% progress</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        progress
                    </div>
                    <div class="status-number">
                        76%
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-red-haze">1349</h3>
                    <small>NEW FEEDBACKS</small>
                </div>
                <div class="icon">
                    <i class="icon-like"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 85%;" class="progress-bar progress-bar-success red-haze">
                        <span class="sr-only">85% change</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        change
                    </div>
                    <div class="status-number">
                        85%
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-blue-sharp">567</h3>
                    <small>NEW ORDERS</small>
                </div>
                <div class="icon">
                    <i class="icon-basket"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 45%;" class="progress-bar progress-bar-success blue-sharp">
                        <span class="sr-only">45% grow</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        grow
                    </div>
                    <div class="status-number">
                        45%
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat2">
            <div class="display">
                <div class="number">
                    <h3 class="font-purple-soft">276</h3>
                    <small>NEW USERS</small>
                </div>
                <div class="icon">
                    <i class="icon-user"></i>
                </div>
            </div>
            <div class="progress-info">
                <div class="progress">
                    <span style="width: 57%;" class="progress-bar progress-bar-success purple-soft">
                        <span class="sr-only">56% change</span>
                    </span>
                </div>
                <div class="status">
                    <div class="status-title">
                        change
                    </div>
                    <div class="status-number">
                        57%
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 col-sm-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet light ">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <i class="icon-bar-chart font-green-haze hide"></i>
                    <span class="caption-subject font-green-haze bold uppercase">Sales Summary</span>
                    <span class="caption-helper hide">weekly stats...</span>
                </div>
                <div class="actions">
                    <div class="btn-group btn-group-devided" data-toggle="buttons">
                        <label class="btn btn-transparent grey-salsa btn-circle btn-sm active">
                            <input type="radio" name="options" class="toggle" id="option1">Today
                        </label>
                        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
                            <input type="radio" name="options" class="toggle" id="option2">Week
                        </label>
                        <label class="btn btn-transparent grey-salsa btn-circle btn-sm">
                            <input type="radio" name="options" class="toggle" id="option2">Month
                        </label>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <div class="row list-separated">
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Total Sales
                        </div>
                        <div class="uppercase font-hg font-red-flamingo">
                            13,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Revenue
                        </div>
                        <div class="uppercase font-hg font-green-haze">
                            4,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Expenses
                        </div>
                        <div class="uppercase font-hg font-purple">
                            11,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="font-grey-mint font-sm">
                            Growth
                        </div>
                        <div class="uppercase font-hg font-blue-sharp">
                            9,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </div>
                </div>
                <ul class="list-separated list-inline-xs hide">
                    <li>
                        <div class="font-grey-mint font-sm">
                            Total Sales
                        </div>
                        <div class="uppercase font-hg font-red-flamingo">
                            13,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </li>
                    <li>
                    </li>
                    <li class="border">
                        <div class="font-grey-mint font-sm">
                            Revenue
                        </div>
                        <div class="uppercase font-hg font-green-haze">
                            4,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <div class="font-grey-mint font-sm">
                            Expenses
                        </div>
                        <div class="uppercase font-hg font-purple">
                            11,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </li>
                    <li class="divider">
                    </li>
                    <li>
                        <div class="font-grey-mint font-sm">
                            Growth
                        </div>
                        <div class="uppercase font-hg font-blue-sharp">
                            9,760 <span class="font-lg font-grey-mint">$</span>
                        </div>
                    </li>
                </ul>
                <div id="sales_statistics" class="portlet-body-morris-fit morris-chart" style="height: 260px">
                </div>
            </div>
        </div>
        <!-- END PORTLET-->
    </div>

    <div class="col-md-6 col-sm-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet light ">
            <div class="portlet-title">
                <div class="caption caption-md">
                    <i class="icon-bar-chart font-green-haze hide"></i>
                    <span class="caption-subject font-green-haze bold uppercase">Member Activity</span>
                    <span class="caption-helper hide">weekly stats...</span>
                </div>
                <div class="actions">
                    <button id="RefreshMemberActivityButton" class="btn btn-success btn-rounded"><i class="fa fa-refresh"></i> Refresh</button>
                </div>
            </div>
            <div class="portlet-body">
                <div class="row number-stats margin-bottom-30">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="stat-left">
                            <div class="stat-chart">
                                <!-- do not line break "sparkline_bar" div. sparkline chart has an issue when the container div has line break -->
                                <div id="totalMembersChart"></div>
                            </div>
                            <div class="stat-number">
                                <div class="title">
                                    Total
                                </div>
                                <div class="number">
                                    2460
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <div class="stat-right">
                            <div class="stat-chart">
                                <!-- do not line break "sparkline_bar" div. sparkline chart has an issue when the container div has line break -->
                                <div id="newMembersChart"></div>
                            </div>
                            <div class="stat-number">
                                <div class="title">
                                    New
                                </div>
                                <div class="number">
                                    719
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-scrollable table-scrollable-borderless">
                    <table class="table table-hover table-light">
                        <thead>
                            <tr class="uppercase">
                                <th colspan="2">
                                    MEMBER
                                </th>
                                <th>
                                    Earnings
                                </th>
                                <th>
                                    CASES
                                </th>
                                <th>
                                    CLOSED
                                </th>
                                <th>
                                    RATE
                                </th>
                            </tr>
                        </thead>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar4.jpg">
                            </td>
                            <td>
                                <a href="javascript:;" class="primary-link">Brain</a>
                            </td>
                            <td>
                                $345
                            </td>
                            <td>
                                45
                            </td>
                            <td>
                                124
                            </td>
                            <td>
                                <span class="bold font-green-haze">80%</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar5.jpg">
                            </td>
                            <td>
                                <a href="javascript:;" class="primary-link">Nick</a>
                            </td>
                            <td>
                                $560
                            </td>
                            <td>
                                12
                            </td>
                            <td>
                                24
                            </td>
                            <td>
                                <span class="bold font-green-haze">67%</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar6.jpg">
                            </td>
                            <td>
                                <a href="javascript:;" class="primary-link">Tim</a>
                            </td>
                            <td>
                                $1,345
                            </td>
                            <td>
                                450
                            </td>
                            <td>
                                46
                            </td>
                            <td>
                                <span class="bold font-green-haze">98%</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="fit">
                                <img class="user-pic" src="~/metronic/assets/admin/layout4/img/avatar7.jpg">
                            </td>
                            <td>
                                <a href="javascript:;" class="primary-link">Tom</a>
                            </td>
                            <td>
                                $645
                            </td>
                            <td>
                                50
                            </td>
                            <td>
                                89
                            </td>
                            <td>
                                <span class="bold font-green-haze">58%</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- END PORTLET-->
    </div>
</div>